<template>
  <div class="app-shell">
    <MainNav />
    <main class="app-content">
      <RouterView />
    </main>
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router';
import MainNav from './components/MainNav.vue';
import AppFooter from './components/AppFooter.vue';
</script>

<style scoped>
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #f7fbfb;
  color: #1c2a2b;
}

.app-content {
  padding: 24px 20px 48px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
</style>
